import React, { useState, useEffect } from 'react'
import './index.less'
import { tagList as navData } from '@/utils/data'
export default function Nav(props) {
    const { update } = props;

    const [activeId, setActiveId] = useState(0)
    const [childActiveId, setChildActiveId] = useState(0)
    const getChildren = (id: number): [] => {
        return navData.find((item: any) => item.id === id)?.children
    }
    useEffect(() => {
        update(childActiveId ? childActiveId : activeId)
    }, [activeId, childActiveId]);
    return (
        <div className="nav">
            <div className="nav_list">
                {navData.map((item: any) => {
                    return <span
                        className={activeId === item.id ? "nav_label nav_list_active" : "nav_label"}
                        key={item.id}
                        onClick={() => { setActiveId(item.id) }}
                    >
                        {item.name}
                    </span>
                })}
            </div>
            {
                getChildren(activeId) ?
                    <div className="children_box">
                        {getChildren(activeId).map((item: any) => {
                            return <span
                                key={item.id}
                                className={childActiveId === item.id ? "children_nav nav_list_active" : "children_nav"}
                                onClick={() => { setChildActiveId(item.id) }}
                            >{item.name}</span>
                        })}
                    </div> :
                    ""
            }
        </div>
    )
}
